<template>
  <ElDialog 右键菜单
    :model-value="show"
    @update:model-value="$emit('update:show', $event)"
    :append-to-body="true"
    :show-close="false"
    :modal="false"
    :style="{
      top: `${position.y}px`,
      left: `${position.x}px`,
      margin: 0,
      width: '300px',
      padding: 0,
      overflow: 'hidden',
      border: '1px solid #ffffff80'
    }"
    class="my-createNodeMenu-dialog">
    <template #header="{ close, titleId, titleClass }">
      <div style="background: var(--bg-builtin);" py1 px2 c-white>节点操作</div>
    </template>

    <div py1 px2 cursor-pointer
    select-none hover-bg-gray v-for="item in menuItems" @click="item.action">{{ item.title }}</div>
    <div text-gray v-if="menuItems.length === 0" py1 px2>无操作</div>
  </ElDialog>
</template>

<script setup lang="ts">
import type { MathPoint } from '~/models/Math/MathPoint';
import { oBus } from '~/models/graph/editorbus';

const props = defineProps<{
  show: boolean,
  position: MathPoint,
}>()

const emits = defineEmits<{
  (e: 'update:show', item: boolean): void
}>()

function onClickDelete() {
  oBus.value.deleteActiveNode()
}

// interface Action {
//   () : void
// }

interface MenuItem {
  title: string
  action: () => void
}

const menuItems = computed(() => {
  const allItems: MenuItem[] = [
    {
      title: '删除',
      action: onClickDelete,
    },
  ]
  const removeItemByTitle = (title: string) => {
    remove(allItems, x => x.title === title)
  }
  if (['Start', 'End'].includes(oBus.value.activeNode!.prototype.name)) {
    removeItemByTitle('删除')
  }
  return allItems
})
</script>

<style lang="scss">
.my-createNodeMenu-dialog {
  .el-dialog__header {
    padding: 0;
  }
}
</style>